<!--
 * @Description:
 * @Date: 2024-05-16 10:36:10
 * @LastEditTime: 2024-06-06 11:50:35
-->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '法律小知识',
    navigationBarTextStyle: 'white', //标题栏字体颜色
    navigationBarBackgroundColor: '#0063AF', //标题栏背景色(纯色)
  },
}
</route>

<template>
  <view class="law w-screen h-screen box-border bg-#F4F5F9">
    <image class="w-screen h-250rpx" :src="banner" mode="scaleToFill" />
    <view class="w-90% mx-auto translate-y--8% rounded-20rpx bg-#fff">
      <view
        class="flex items-center p-20rpx overflow-hidden border-b-solid border-b-2rpx border-#E5E5E5"
        v-for="(item, index) in benefit"
        :key="index"
        @click="handleDenefit(item.id)"
      >
        <view class="w-20rpx h20rpx rounded-50% bg-#3C6998 mr-20rpx"></view>

        <text class="text-26rpx flex-1 ellipsis">{{ item.title }}</text>
        <view>
          <wd-icon name="arrow-right" size="22px" color="#BDBDBD"></wd-icon>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { getPopularizeListAPI } from '@/service/index/foo'
import banner from '../../../static/images/banner.jpg'
const benefit = ref([])
let benefitType = null
onLoad((option) => {
  if (option.type) {
    benefitType = option.type
    getPopularizeListAPI({ type: option.type }).then((res) => {
      benefit.value = res.data.list
    })
  }
})
function handleDenefit(id) {
  uni.navigateTo({
    url: `/pages/menu/popularizeLaw/lawDetails?id=${id}&type=${benefitType}`,
  })
}
</script>
<style lang="scss" scoped>
::v-deep .wd-button {
  margin: 0 10rpx;
  background: #409cd9 !important;
}
</style>
